import { useEffect, useState } from 'react';
import './index.less';
const multiColumn = () => {
  let flag = true;
  useEffect(() => {
    //生成 100到400之间的随机数
    //生成50次 随机的照片
    if (!flag) return;
    for (var i = 0; i < 100; i++) {
      var num = parseInt(Math.random() * (400 - 100 + 1) + 100);
      var num1 = parseInt(Math.random() * (400 - 100 + 1) + 100);
      var num2 = parseInt(Math.random() * (50 - 1 + 1) + 1);
      var newnum = `https://picsum.photos/${num}/${num1}?random=${num2}`;
      var masonry = document.querySelector('#masonry');
      var item = document.createElement('div');
      item.className = 'item';
      var div2 = document.createElement('div'); //添加遮罩层
      div2.className = 'display';
      item.appendChild(div2);
      var img = document.createElement('img');
      img.src = newnum;
      item.appendChild(img);
      masonry.appendChild(item);
    }
    return () => {
      flag = false;
    };
  }, []);
  return <div className="masonry" id="masonry"></div>;
};
export default multiColumn;
